<template>
	<view class="box"> 
		<view class="banner_box">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in bannerlist" :key="index">
					<image class="banner" :src="item.image2" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
	<view class="desc">
		<view class="liangfan">
			<view class="chandi">产地量贩</view>
			<view class="hema">盒马量贩·基地优选·售后无忧</view>
		</view>
		<view class="name">
			<view class="text">东台8424西瓜1个装(单果3kg起)</view>
			<view class="icon">→</view>
		</view>
		<view class="nametwo">皮薄肉厚 汁水充盈</view>
	</view>
	<view class="jiage">
		<view class="price">￥29.9</view>
		<view class="count">/箱</view>
		<view class="del"><del>￥45</del></view>
	</view>
	<view class="fahuo">商家24H发货，第三方物流配送，免运费</view>
	<view class="buzhichi">不支持7天无理由退换货</view>
	<view class="xuanze">已选： 1个/箱</view>
	<view class="pingjia">
		<view class="top">
			<view class="ping">评价 (827)</view>
			<view class="quanbu">查看全部评价 ></view>
		</view>
		<view class="bottom">
			<view class="zhaopian"><image src="https://img0.baidu.com/it/u=452694140,1228335438&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=94906289481bca36e01a70738e2a9022" mode=""></image> </view>
			<view class="pinglun">
				<view class="ping">评价 (827)</view>
				<view class="ping2">很大很新鲜，包装超级安全，好评</view>
			</view>
			<view class="time">2020.05.22</view>
		</view>
	</view>
	</view>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				bannerlist: []
			}
		},
		methods: {

		},
		mounted() {
			axios.get('http://localhost:8080/getResource/swiper').then(res => { //获取数据赋值到bannerlist 然后渲染到页面
				console.log(res.data)
				this.bannerlist = res.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		padding-bottom: 20px;
	}
	.banner_box {
		width: 100%;
		height: 240px;

		swiper {
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.desc{
		.liangfan{
			display: flex;
			.chandi{
				width: 81px;
				height: 22px;
				font-size: 15px;
				color: white;
				background-color: rgb(51,153,255);
				text-align: center;
				margin: 10px;
			}
			.hema{
				margin-top: 10px;
				font-size: 16px;
				color: rgb(153,153,179);
			}
		}
		.name{
			display: flex;
			justify-content: space-between;
			padding: 0 10px;
			.text{
				font-size: 19px;
				font-weight: 400;
			}
		}
		.nametwo{
			color: rgb(153,153,153);
			margin: 10px;
		}
		
	}
	.jiage{
		margin-bottom: 10px;
		display: flex;
		.price{
			color: red;
			font-size: 21px;
			font-weight: 400;
			padding-left: 10px;
		}
		.count{
			color: rgb(153,153,153);
			line-height: 30px;
		}
		.del{
			color: rgb(153,153,153);
			line-height: 30px;
		}
	}
	.fahuo{
		height: 56px;
		width: 350px;
		background-color: rgb(242,242,242);
		margin: auto;
		border-radius: 10px;
		line-height: 56px;
		font-size: 17px;
		box-sizing: border-box;
		padding: 0 8px;
	}
	.buzhichi{
		margin: 10px;
		color: rgb(153,153,153);
	}
	.xuanze{
		height: 56px;
		width: 350px;
		background-color: rgb(242,242,242);
		margin: auto;
		border-radius: 10px;
		line-height: 56px;
		font-size: 17px;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.pingjia{
		height: 137px;
		width: 350px;
		background-color: rgb(242,242,242);
		margin: auto;
		margin-top: 10px;
		border-radius: 10px;
		padding: 10px 0;
		.top{
			display: flex;
			justify-content: space-between;
			padding: 0 10px;
			margin: 10px 0;
		}
		.bottom{
			display: flex;
			
			box-sizing: border-box;
			.zhaopian{
				margin: 10px;
				flex-shrink: 0;
				width: 34px;
				height: 34px;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.pinglun{
				font-size: 14px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
			}
			.time{
				font-size: 14px;
				color: rgb(153,153,153);
			}
		}
	}
</style>
